<template>
    <div class="goods-main">
      <div class="top-img">
        <img :src="topUrl" alt="">
      </div>
      <div class="nav">
        <div>综合</div>
        <div class="price">
          <div>价格</div>
          <div @click="changOrder">
            <img v-if="isShowasc" src="@/assets/image/top.png" alt="">
            <img v-else src="@/assets/image/low.png" alt="">
          </div>
        </div>
        <div>分类</div>
      </div>
      <div class="br"></div>
      <div class="list">
        <div class="item" v-for="item in goodslist" :key="item.id">
            <img :src="item.list_pic_url" alt="">
            <div class="name">{{item.name}}</div>
            <div class="price">￥ {{item.retail_price}}</div>
        </div>
      </div>
    </div>
</template>

<script>
import homeApi from "@/netapi/home/home.js"
export default {
  name:"HomeGoods",
    components: {

    },
    data() {
        return {
          goodslist:[],
          topUrl:"",
          isShowasc:true,
          order:"asc"
        };
    },
    computed: {

    },
    created() {
      console.log(this.$route.query);
      this.getGoods()
    },
    mounted() {

    },
    methods: {
      getGoods(){
        let params={};
        if (this.$route.query.isnew) {
          
        
           params.isNew=1,
            params.order=this.order
         
        }else{
           params.isHot=1,
            params.order=this.order
        }
        homeApi.goodsList(params).then(res=>{
          this.goodslist = res.data;
          this.topUrl = res.data[1].primary_pic_url
          })
      },
      changOrder(){
        this.isShowasc = !this.isShowasc;
        if (this.order == "asc") {
          this.order = "desc" 
          
        }else if (this.order == "desc") {
          this.order = "asc"
          
        }
        this.getGoods()
      }
    },
};
</script>

<style scoped lang="scss">
  .goods-main{
    width: 100%;
    margin-top: 46px;
    .top-img{
      width: 100%;
      height: 139px;

      img{
         width: 100%;
      height: 139px;
      }
    }
    .nav{
      width: calc(100vw - 100px);
      height: 40px;
      margin:  0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      
      .price{
        display: flex;
        align-items: center;
        img{
          height:18px;
          width: 16px;
        }
      }
    }
    .br{
      width: 100%;
      height: 10px;
      background-color: #f4f4f4;
    }
    .list{
      width: 100%;
     
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      background-color: #f4f4f4;
      .item{
        width: 187px;
        height: 240px;
        text-align: center;
        background-color: #fff;
        margin-bottom: 2px;
        .price{
          margin-top: 20px;
        }
        img{
          width: 100%;
          height: 167px;

        }
      }
    }
    
  }
</style>
